<template>
    <a-layout class="Layout bg">
        <Myheader :logo="logoIcon" :headers="Headers" class="header"></Myheader>

        <a-layout-content class=".bg-alpha bg">
            <RouterView></RouterView>
        </a-layout-content>
    </a-layout>
</template>

<script lang="ts" setup>
import Myheader from '@/components/Headers/MyHeader.vue';

// 定义头部导航菜单项
import logoIcon from '../assets/icons/title.png';

import SyIcon from '@/assets/icons/SY.png';
import SBIcon from '@/assets/icons/SB.png';
import JK2Icon from '@/assets/icons/JK2.png';
import FxIcon from '@/assets/icons/FX.png';
const Headers = [
    { to: '/water/index', text: '供水首页', icon: SyIcon },

    {
        to: '/water/monitor',
        text: '供水管网监控',
        icon: SyIcon
    },
    {
        to: '/water/fireMonitor',
        text: '消防管网监控',
        icon: JK2Icon
    },
    {
        to: '/water/equipment',
        text: '设施设备管理',
        icon: SBIcon
    },
    {
        to: '/water/waterAnalysis',
        text: '水务数据分析',
        icon: FxIcon
    },
    {
        to: '/water/watersavingAnalysis',
        text: '节水分析',
        icon: FxIcon
    },
    {
        to: '/water/watersourceMng',
        text: '水源管理',
        icon: FxIcon
    }
];

import { RouterView } from 'vue-router';
</script>
<style lang="scss" scoped>
@import '/src/assets/style/bg.scss';

.header {
    z-index: 1;
}
.Layout {
    height: 100vh;
    width: 100%;
}

#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

.site-layout-background {
    background: #fff;
}
</style>
